<template>
  <!--财务管理-->
  <div class="statistics-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="4">
        <el-button type="primary" icon="el-icon-download" @click="handleExport">
          导出
        </el-button>
      </vab-query-form-left-panel>

      <vab-query-form-right-panel :span="20">
        <el-form :inline="true" :model="queryForm" @submit.native.prevent>

          <el-form-item>
            <el-input
              v-model.trim="queryForm.account"
              style="margin-right: 20px"
              placeholder="请输入收款人或手机号"
              clearable
            />
          </el-form-item>

          <el-form-item>
            <el-select
              v-model="queryForm.status"
              clearable
              placeholder="请选择付款状态"
            >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()">
              查询
            </el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-refresh-right"
              @click="restart"
            >
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      id="out-table"
      v-loading="listLoading"
      :data="list"
      @selection-change="setSelectRows"
    >
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="序号"
        sortable
        type="index"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="mobile"
        label="项目名称"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="mobile"
        label="收款人姓名"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="mobile"
        label="手机号"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="mobile"
        label="银行卡号"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="company_name"
        label="所属商户"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="company_name"
        label="商户类型"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="company_name"
        label="付款状态"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="company_name"
        label="付款金额"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="company_name"
        label="付款完成时间"
      />
      <el-table-column align="center" label="操作" width="120px">
        <template #default="{ row }">
          <el-button type="text" @click="detail(row)">详 情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.page"
      :page-size="queryForm.list_row"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 传媒-明细-详情 -->
    <el-dialog title="收款明细" :visible.sync="dialogDetail" width="1000px">
      <el-table v-loading="listLoading" :data="details">
        <el-table-column
          align="center"
          show-overflow-tooltip
          label="序号"
          sortable
          type="index"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="activity.activity_name"
          label="项目名称"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="activity.activity_name"
          label="类别"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="project_category"
          label="细项"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="detail"
          label="数量"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="number"
          label="付款金额"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="subtotal"
          label="服务费"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="supplier_info.idcard"
          label="身份证号"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="supplier_info.idcard"
          label="项目开始时间"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="supplier_info.idcard"
          label="项目结束时间"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          label="操作"
        >
          <el-button type="text" @click="look()">
            查看材料
          </el-button>
<!--          <template #default="{ row }">
            <div
              v-for="(item, index) in row.check_img"
              :key="index"
              style="float: left; margin: 10px"
            >
              <el-image
                style="width: 60px; height: 60px"
                :src="item"
                :preview-src-list="[item]"
              />
            </div>
          </template>-->
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogDetail = false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTaxPaymentLists,
  getTaxPaymentTwoLists,
  getTaxPaymentThreeLists,
  setTaxImgs,
  submitTaxPayments,
  getOssUploadsParam,
  setTaxRejects
} from '@/api/common'
import axios from 'axios'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
  name: 'Collection',
  data() {
    return {
      status: [
        {
          value: '已付款',
          label: '已付款',
        },
        {
          value: '已完税',
          label: '已完税',
        },
      ],
      queryForm: {
        page: 1,
        list_row: 10,
        account: '',
        name: '',
        type: '',
        status: '',
      },
      form: {
        content: '',
      },
      disabled: false,
      listLoading: false,
      list: [],
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      details: [],
      companyType: '',
      img: '',
      dialogDetail: false,
      infos: [],
      paysid: '',
      dialogHd: false,
      dialogDc: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      params:{
        user:'',
        user_id:'',
        content:''
      },
      rules: {
        content: [
          { required: true, message: '请输入驳回理由', trigger: 'blur' },
        ],
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    look(){},
    //导出
    handleExport() {
      /* 从表生成工作簿对象 */
      var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array',
      })
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: 'application/octet-stream' }),
          //设置导出文件名称
          '收款明细.xlsx',
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    },
    pass2(){
      const params = {
        id:this.params.user_id,
        reject:this.params.content
      }
      //const {data} = await setTaxRejects(params)
      setTaxRejects(params).then((data) => {
        this.$message.success('驳回成功！')
        this.dialogFormVisible = false
        this.getData()
      })
      this.dialogFormVisible2 = false;
    },
    tomeal(row){
      console.log(2222,row)
      this.dialogFormVisible2 = true;
      this.params.user = row.mobile;
      this.params.user_id = row.id;
    },
    handlePictureCardPreview(){},
    handleRemove(){},
    handleDetail() {},
    //搜索
    search() {
      this.getData()
    },
    restart() {
      this.queryForm = {}
      this.getData()
    },
    getData() {
      let params = {
        page: this.queryForm.page,
        limit: this.queryForm.list_row,
        mobile: this.queryForm.account,
        name: this.queryForm.name,
        type: this.queryForm.type,
        pay_status: this.queryForm.status,
      }
      getTaxPaymentLists(params).then((data) => {
        this.list = data.data
        this.total = data.count
      })
    },
    //付款详情
    detail(row) {
      this.dialogDetail = true
      this.companyType = row.company_type
      this.paysid = row.id
      let params = {
        id: row.id,
      }
      getTaxPaymentTwoLists(params).then((data) => {
        this.details = data.data
      })
    },
    deinfo() {
      if (this.companyType == 'hd') {
        this.dialogHd = true
        this.dialogDc = false
      } else if (this.companyType == 'dc') {
        this.dialogHd = false
        this.dialogDc = true
      }
      let params = {
        id: this.paysid,
      }
      getTaxPaymentThreeLists(params).then((data) => {
        this.infos = data.data
      })
    },
    ws(row) {
      this.dialogFormVisible1 = true
      this.img = row.tax_img
      this.paysid = row.id
    },
    savePic() {
      let params = {
        id: this.paysid,
        tax_img: this.img,
      }
      setTaxImgs(params).then((data) => {
        this.$message.success('上传成功！')
        this.getData()
      })
    },
    repay(row) {
      let params = {
        id: row.id,
      }
      submitTaxPayments(params).then((data) => {
        this.$message.success('发佣成功！')
        this.getData()
      })
    },
    uploadImg(params) {
      const file = params.file,
        fileType = file.type,
        isImage = fileType.indexOf('image') != -1,
        isLt2M = file.size / 1024 / 1024 < 2
      // 这里常规检验，看项目需求而定
      if (!isImage) {
        this.$message.error('只能上传图片格式png、jpg、gif!')
        return
      }
      if (!isLt2M) {
        this.$message.error('只能上传图片大小小于2M')
        return
      }
      getOssUploadsParam().then((res) => {
        const form = new FormData()
        form.append('key', res.data.dir + file.name)
        form.append('OSSAccessKeyId', res.data.accessid)
        form.append('policy', res.data.policy)
        form.append('success_action_status', '200')
        form.append('signature', res.data.signature)
        form.append('file', file)
        console.log(222, res)
        axios({
          url: res.data.host,
          method: 'POST',
          data: form,
          processData: false,
          cache: false,
          contentType: false,
        }).then((data) => {
          this.img = res.data.host + '/' + res.data.dir + file.name
          console.log(66, this.img)
        })
      })
    },
    setSelectRows() {},
    handleSizeChange(val) {
      this.queryForm.list_row = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.getData()
    },
  },
}
</script>

<style lang="scss" scoped>
.el-button {
  font-size: 14px;
  margin-right: 20px;
}
</style>
